<template>
  <div class="menu-container">
    <div v-for="(item, idx) in watchList" :key="idx" class="menu-box">
      <span class="menu-title">{{ item.title }}</span>
      <div
        v-for="(s, i) in item.list"
        :key="i"
        class="menu-item"
        @click="clickHandle(s)"
      >
        {{ s.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MenuInfo",
  data() {
    return {
      watchList: [
        { title: "机房", list: [{ name: "主机" }] },
        { title: "网络", list: [{ name: "CDN" }, { name: "主域名" }] },
        {
          title: "前台",
          list: [
            { name: "静态资源" },
            { name: "接口响应" },
            { name: "js 报错" }
          ]
        },
        { title: "主要页面", list: [{ name: "页面监控" }] }
      ]
    }
  },
  methods: {
    clickHandle(menu) {
      this.$emit("showDashboard", menu)
    }
  }
}
</script>

<style lang="scss" scoped>
.menu-container {
  width: 230px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #fff;
  min-height: 600px;
  padding: 10px 15px 10px;
  .menu-box {
    margin-bottom: 6px;
    .menu-title {
      font-size: 16px;
      line-height: 32px;
    }
    .menu-item {
      text-align: center;
      background: #e1f5ea;
      line-height: 36px;
      height: 36px;
      margin-bottom: 10px;
      border: 1px solid #abc483;
      border-radius: 4px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
